<!--
@Descripttion 时期选择
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FDatePicker from '@/components/form/f-date-picker'
  注册组件
    components: {
      FDatePicker
    }
  使用
    <FDatePicker v-model="xxx" />
    <FDatePicker v-model="xxx" type="date" format="" value-format="" width="220px" :disabled="false" placeholder="选择日期" default-time=""/>
    type         String  默认值('date') 日期类型 date | year | month | datetime | daterange | monthrange | datetimerange
    format       String  默认值('')     日期格式-显示
    value-format String  默认值('')     日期格式-值 默认Date对象
    width        String  默认值(220px)  输入框宽度
    disabled     Boolean 默认值(false)  是否失效
    placeholder  String  默认值(请选择)  默认占位文本 (范围型此项不生效)
    default-time String  默认值('')     默认具体时刻 非范围选择时：string / 范围选择时：string[]
 -->
<template>
  <el-date-picker
    v-model="val"
    @change="changeVal"
    :type="type"
    :format="format"
    :value-format="valueFormat"
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
    range-separator=" "
    :start-placeholder="$t('placeholder.Begin data')"
    :end-placeholder="$t('placeholder.End data')"
    :default-time="defaultTime"
    unlink-panels
  ></el-date-picker>
</template>

<script>
export default {
  name: 'f-date-picker',
  props: {
    value: {
      required: true,
      default: null
    },
    // 范围类型 daterange | monthrange
    rangeType: {
      type: String,
      default: 'date'
    },
    // 日期类型 date | year | month (如设置rangeType则不需要设置此项)
    type: {
      type: String,
      default: 'date'
    },
    // 日期格式-显示
    format: {
      type: String,
      default: ''
    },
    // 日期格式-值
    valueFormat: {
      type: String,
      default: ''
    },
    // 输入框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Select data')
      }
    },
    // 默认具体时刻
    defaultTime: {
      type: [String, Array],
      default: ''
    }
  },
  data() {
    return {
      val: null
    }
  },
  watch: {
    value: {
      handler(newV, oldV) {
        this.$set(this, 'val', newV)
      },
      immediate: true
    }
  },
  methods: {
    changeVal() {
      this.$emit('input', this.val)
    }
  }
}
</script>
<style lang="less" scoped>
  .el-date-editor /deep/.el-range-separator{
    width: auto;
    padding: 0;
  }
  /deep/.el-range-editor.el-input__inner{
    padding-right: 0;
  }
  /deep/.el-date-editor--daterange{
    min-width: 220px;
  }
  /deep/.el-date-editor--datetimerange{
    min-width: 350px;
  }
</style>
